<!doctype html>
{% load static %}
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>详情</title>
    <link href="{% static 'css/css.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'js/jquery-3.5.0.min.js' %}"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>

<!--头部-->
{% include 'header.html'%}


<div class="spm" id="app">
    <p><b>{{goods_title}}</b></p>
</div>
<div class="spxq">
    <p>当前位置：爱优惠商城 > {{menu_name}} > {{goods_title}}</p>
    <div class="xq">
        <div class="xq_left"><img src="{{goods_img}}" width="280" height="278" alt=""/></div>
        <div class="xq_right">
            <ul>
                <div class="jq">
                    <p>
                        <label for="textfield">全网最低价：</label>
                        &nbsp; &nbsp;
                        <m>￥ {{goods_price}}</m>
                    </p>
                </div>

                <li>
                    <table class="details_table">
                    </table>
                </li>
            </ul>
        </div>
    </div>
    <div class="spxq_right">
        <div class="zt">
            <p>全网比价</p>
        </div>
        <div class="zhuchang">
            <div class="kuangyi">
                <div class="gwmz"><img src="{% static 'images/苏宁易购.png' %}" width="108" height="25" alt=""/></div>
                <div class="sptp"><img src="{{goods_img}}" width="280" height="278" alt=""/>
                    <div class="jg">
                        <span>￥ {{goods_sn_price}}</span>
                    </div>
                    <div class="ckxq"><a href="{{goods_sn_link}}" target="_blank">查看详情</a></div>
                </div>
            </div>
            <div class="kuanger">
                <div class="gwmz"><img src="{% static 'images/天猫.png' %}" width="112" height="26"></div>
                <div class="sptp"><img src="{{goods_img}}" width="280" height="278" alt=""/>
                    <div class="jg">
                        <span>￥ {{goods_tm_price}}</span>
                    </div>
                    <div class="ckxq"><a href="{{goods_tm_link}}" target="_blank">查看详情</a></div>
                </div>
            </div>
            <div class="kuangsan">
                <div class="gwmz"><img src="{% static 'images/京东.png' %}" width="69" height="43"></div>
                <div class="sptp"><img src="{{goods_img}}" width="280" height="278" alt=""/>
                    <div class="jg">
                        <span>￥ {{goods_jd_price}}</span>
                    </div>
                    <div class="ckxq"><a href="{{goods_jd_link}}" target="_blank">查看详情</a></div>
                </div>
            </div>
            <div class="kuangsi">
                <div class="gwmz"><img src="{% static 'images/淘宝.png' %}" width="110" height="34"></div>
                <div class="sptp"><img src="{{goods_img}}" width="280" height="278" alt=""/>
                    <div class="jg">
                        <span>￥ {{goods_tb_price}}</span>
                    </div>
                    <div class="ckxq"><a href="{{goods_tb_link}}" target="_blank">查看详情</a></div>
                </div>
            </div>
            <div class="kuangwu">
                <div class="gwmz"><img src="{% static 'images/唯品会.png' %}" width="61" height="27"></div>
                <div class="sptp"><img src="{{goods_img}}" width="280" height="278" alt=""/>
                    <div class="jg">
                        <span>￥ {{goods_wph_price}}</span>
                    </div>
                    <div class="ckxq"><a href="{{goods_wph_link}}" target="_blank">查看详情</a></div>
                </div>
            </div>
        </div>
    </div>
    <el-backtop></el-backtop>
</div>

{% include 'footer.html'%}
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return { visible: false }
        }
    })
</script>
<script>
    window.onload = function () {
        loadSpecification();
    }

    function loadSpecification() {
        let specification = "{{ goods_specification }}";
        let specifications = specification.split(",");
        console.log(specifications)
        for (let i = 0; i < specifications.length; i+=2) {
            let tr = document.createElement("tr");
            let td1 = document.createElement("td");
            td1.textContent = $.trim(specifications[i]);
            tr.append(td1)
            if(i+1 < specifications.length){
                let td2 = document.createElement("td");
                td2.textContent = $.trim(specifications[i+1]);
                tr.append(td2)
            }
            $(".details_table").append(tr);
        }
    }
</script>
</html>
